<script setup lang="ts">
import { computed, provide, toRef } from 'vue'
import SingleSeries from '@renderer/components/views/SingleSeries.vue'
import { ArrowLeftBold } from '@element-plus/icons-vue'
import { useScanStore } from '@renderer/store/pinia/scan'
import { getSeriesKeywords } from '../../utils/commonFn'
import { useRouter } from 'vue-router'
import { NormalScanSeries } from '@renderer/views/multiScanSeriesPage/types'

const scanStore = useScanStore()
const router = useRouter()
const activeScanSeriesRef = computed(() => {
  const seriesId = scanStore.activeReconSeriesId
  if (seriesId) {
    return scanStore.scanSeriesInfo.getSeriesById(seriesId)
  } else {
    return null
  }
})

provide('multiSeries', {
  activeScanSeriesRef: activeScanSeriesRef,
  scanSeriesArr: scanStore.scanSeriesInfo.scanSeriesArr
})

const handleBack = () => {
  router.back()
}

const seriesListRef = computed(() => {
  return scanStore.scanSeriesInfo.getFinishedSeries()
})

const handleChangeActiveSeries = (series: NormalScanSeries) => {
  scanStore.setActiveReconSeriesId(series.id)
}

</script>

<template>
  <div class="w-full h-full flex">
    <div class="w-[120px] h-full flex flex-col box-border  border items-center">
      <p class="mb-[10px]">扫描序列</p>

      <div class="h-[550px] overflow-auto w-full">
        <div v-for="(item,index) in seriesListRef"
             @click="handleChangeActiveSeries(item)"
             :class="activeScanSeriesRef!.id === item.id ? 'bg-active': ''"
             :key="item.seriesId" class="flex-1 max-h-[100px] flex flex-col justify-center items-center">
          <p>{{ item.scanSeriesName }}</p>
          <p>{{ item.scanType }}</p>
          <p>{{ getSeriesKeywords(item) }}</p>
        </div>
      </div>
      <div>
        <el-button @click="handleBack">
          <el-icon size="20px" class="font-bold">
            <arrow-left-bold />
          </el-icon>
          <span>back</span>
        </el-button>
      </div>
    </div>
    <div class="flex-1 relative">
      <template v-for="series in seriesListRef" :key="series.id">
        <single-series
          :seriesId="series.id"
          v-show="activeScanSeriesRef!.id === series.id" />
      </template>

      <div class="absolute right-0 top-0">
        <el-button>结束扫描</el-button>
        <el-button>归档</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
